import {reducer} from "./redux-reducer";
import React from 'react';
import {connect, Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import {fetchTimer, saveTimer} from "./redux-actions";
import ReduxForm from "../components/ReduxForm";
import { thunk } from 'redux-thunk';

const store = createStore(
    reducer,
    applyMiddleware(thunk)
);

function mapStateToProps(state){
    return {
        isLoading: state.isLoading,
        timer: state.timer,
        timers: state.timers,
        saveStatus: state.saveStatus
    }
}

function mapDispatchToProps(dispatch){
    return {
        onSubmit: timer=>{
            dispatch(saveTimer(timer))
        }
    }
}

const MyReduxForm = connect(mapStateToProps,mapDispatchToProps)(ReduxForm);

export default class ReduxApp extends React.Component {
    static displayName = 'redux-app';

    componentDidMount() {
        store.dispatch(fetchTimer());
    }

    render() {
        return (
            <Provider store={store}>
                <MyReduxForm />
            </Provider>
        );
    }
};
